<template>
    <div class="person_page">
      <div class="person wrap">
        <Crumb> </Crumb>
        <main>
          <aside>
            <div
              class="avatar"
              :style="{ backgroundImage: `url(${store.userInfo.headImg})` }"
            ></div>
            <div class="name">{{store.userInfo.nickName}}<span @click="loginOutFn" style="cursor:pointer;">[退出]</span></div>
            <div class="title">
              <img
                src="../../assets/img/transaction.png"
                width="20"
                alt="交易管理"
              />
              交易管理
            </div>
            <ul class="list">
                <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
              个人中心
            </li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
              我的订单
            </li>
            <li :class="/\/cart/g.test($route.path) ? 'active' : ''">购物车</li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
              消息通知
            </li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
              积分明细
            </li>
            <li :class="/\/person1/g.test($route.path) ? 'active' : ''">
              积分攻略
            </li>
            </ul>
            <div class="title">
              <img
                src="../../assets/img/transaction.png"
                width="20"
                alt="个人信息管理"
              />
              个人信息管理
            </div>
            <ul class="list">
              <li>地址管理</li>
              <li>账号安全</li>
            </ul>
          </aside>
          <!-- 二级路由出口 -->
          <article><router-view></router-view></article>
        </main>
      </div>
    </div>
  </template>

<script setup lang='ts'>
import { useRouter } from 'vue-router';
import { useStore } from "@/store/user"
import { ElMessageBox, ElMessage } from "element-plus";
import Crumb from "@/components/Crumb.vue"
const store = useStore()
const router = useRouter()
// 退出登录
const loginOutFn = () => {
  ElMessageBox.confirm('是否确定退出登录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    localStorage.removeItem("x-auth-token");
    setTimeout(() => {
      ElMessage.success('退出成功');
        router.push("/home");
        store.initUserInfo()
      }, 1000);
  })
    
  
}
</script>

<style lang="less" scoped>
.person_page {
  background: #fff;
  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 60px;
      box-sizing: border-box;
      padding: 30px 18px 0;
      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;
        span {
          text-decoration: underline;
          color: #2a5df1;
        }
      }
      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        img {
          margin-right: 6px;
        }
      }
      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;
          &.active {
            color: #0a328e;
            font-weight: bold;
            &::before {
              width: 2px;
              height: 14px;
              background:#0a328e;
              display: inline-block;
              content: "";
              margin-right: 10px;
            }
          }
        }
      }
    }
    .jz{
      width: 100%;
      height: 100%;
    }
    article {
      flex: 1;
      padding: 20px 0 0 0px;
      box-sizing: border-box;
      background: #fff;
    }
  }
}
</style>
